<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./vue.js"></script>
</head>
<style>

</style>

<body>
    <div id="app">
        hello
        <alert-box>
            <!-- Something bad happened. -->
            <button v-on:click='hoverButton' >this is a {{msg}}</button>
        </alert-box>
    </div>
    <script>
        Vue.component('alert-box', {
            template:`
            <div class="demo-alert-box">
                <strong>右边的是插槽！</strong>
                <slot></slot>
                <b>左边的是插槽!</b>

            </div>
            `
        })
       
        const app = new Vue({
            el: '#app',
            data: {
                msg:'button'
            },
            methods: {
                hoverButton:function(){
                    alert("this is a button function")
                },
                ho:function(){
                    alert('fdsa')
                }

            },
        });
    </script>
</body>

</html>